<style type="text/css" title="currentStyle">
  @import "./style/default/demo_table_jui.css";
  @import "./style/default/jquery-ui-1.8.4.custom.css";
<?php
$default_img_album = "./style/default/default-album.png";
?>
.hide_infolist{
	display:none;
	width:300px;
	position:absolute;
	margin-left: -300px;
	background:#FFC;
	text-align:left;
}
.img_infolist{
	float:left;
}
.clickhere, a{
	cursor:pointer;	
}
.clickhere:hover, a:hover{
	color:#903;
}
td.details {
	background-color: #FFC;
	border: 1px solid #FF0;
}
</style>

<script type="text/javascript" language="javascript" src="./script/jquery.dataTables.min.js"></script>
<script>
var oTable;
$(document).ready(function() {
	var oTable = $('#example').dataTable( {
		"bProcessing": true,		
		"bJQueryUI": true,
		"sPaginationType": "full_numbers",
		"sAjaxSource": "module/photo/photo_list_getdata.php",
			// 0 = id
			// 1 = path
			// 2 = name
			// 3 = icon
			// 4 = datecreate
			// 5 = description
			// 6 = groupdisplay
		"aoColumns": [ 
			{ "mDataProp": "0" , "sClass": "center"},
			{ "fnRender": function ( oObj ) {
if(oObj.aData[3]!='' && oObj.aData[3]!=null){ 
var src_image = "<?=IMAGE_FOLDER."/".$_SESSION[sess_login]['id']."-".$_SESSION[sess_login]['username'] ?>/"+oObj.aData[1]+"/<?=name_fixed_icon?>"+oObj.aData[3];
} else { 
var src_image = "<?=$default_img_album ?>";
} 
return "<img class='icon_album' src='"+src_image+"' />";
}, "bSortable": false, "sClass": "center"},
			{ "mDataProp": "2" },
			{ "mDataProp": "4" },
			{ "fnRender": function ( oObj ) { return "<div onclick='details(\"d_"+oObj.aData[0]+"\")' class='clickhere'>Details</div> <div class='hide_infolist' id='d_"+oObj.aData[0]+"'> Datecreate: "+oObj.aData[4]+" <br> Description: "+oObj.aData[5]+" <br> Group: "+oObj.aData[6]+" </div>";},"bUseRendered": false, "bSortable": false, "sClass": "center"},
			{ "fnRender": function ( oObj ) { return "<a href='?p=photo&m=photoedit&id="+oObj.aData[0]+"'>Edit</a>";},"bUseRendered": false, "bSortable": false, "sClass": "center"}
			],
	} );
	
			$('.clickhere').live('click', function () {
					var nTr = this.parentNode.parentNode;
					if($(nTr).find('div.clickhere').html()=='Details'){
						//$('.details').hide();
						//$('div.clickhere').html('View Details');
						$(nTr).find('div.clickhere').html('Close');
						oTable.fnOpen( nTr, $(nTr).find('div.hide_infolist').html(), "details" );
						$(nTr).addClass('row_selected');
					} else {
						$(nTr).find('div.clickhere').html('Details');
						oTable.fnClose( nTr ).slideUp();
						//$('.details').hide();
					}
				} );
				
	
	$("#example tbody").click(function(event) {
		$(oTable.fnSettings().aoData).each(function (){
			$(this.nTr).removeClass('row_selected');
		});
		$(event.target.parentNode).addClass('row_selected');
	});
} );

function fnGetSelected( oTableLocal ){
	var aReturn = new Array();
	var aTrs = oTableLocal.fnGetNodes();
	for ( var i=0 ; i<aTrs.length ; i++ ){
		if ( $(aTrs[i]).hasClass('row_selected') ){
			aReturn.push( aTrs[i] );
		}
	}
	return aReturn;
}

</script>

<fieldset>
 <legend> Album list </legend> 
 <input id="checkbox_hide_icon" type="checkbox" onclick="click_hide_icon();"/> Check to hide icon
	<div id="dynamic">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
            <thead>
                <tr>
                    <th width="20" align="center" valign="middle">ID</th>
                    <th width="150" align="left" valign="middle">Icon</th>
                    <th align="left" valign="middle">Album name</th>
                    <th width="145" align="left" valign="middle">Datecreate</th>
                    <th width="50" align="left" valign="middle"></th>
                    <th width="40" align="left" valign="middle"></th>
               </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>
	</div>
</fieldset>
<script>
function click_hide_icon(){
	if($('#checkbox_hide_icon').is(":checked")){
		$('img.icon_album').fadeOut();
	} else {
		$('img.icon_album').fadeIn();
	}
}
</script>